<template>
    <div class="personal-asset-page">
  
      <!-- 资产信息区域 -->
      <el-row>
        <el-col :span="16">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <span>个人资产概览</span>
            </div>
            <el-descriptions title="资产详情">
              <el-descriptions-item label="碳排放额度">
                碳排放额度：{{ carbonQuota }}
              </el-descriptions-item>
              <el-descriptions-item label="碳币余额">
                碳币余额：{{ carbonCoinBalance }}
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 交易记录表格区域 -->
      <el-row>
        <el-col :span="100">
          <el-card class="box-card">
            <div slot="header">
              <span>交易历史记录</span>
            </div>
            <el-table :data="transactionHistory" style="width: 1250px">
              <el-table-column prop="date" label="交易日期" width="180"></el-table-column>
              <el-table-column prop="type" label="交易类型"></el-table-column>
              <el-table-column prop="quota" label="碳额度变动"></el-table-column>
              <el-table-column prop="carbonCoins" label="碳币变动"></el-table-column>
              <el-table-column prop="description" label="交易描述"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        carbonQuota: '10', // 假设初始值为0，实际应从后端获取数据
        carbonCoinBalance: '100',
        transactionHistory: [
        {
          date: '2022-01-01',
          type: '购买碳额度',
          quota: '+100',
          carbonCoins: '-500',
          description: '从卖家A处购买了100单位碳额度'
        },
        {
          date: '2022-01-05',
          type: '出售碳额度',
          quota: '-50',
          carbonCoins: '+250',
          description: '向买家B出售了50单位碳额度'
        },
        {
          date: '2022-01-10',
          type: '购买碳额度',
          quota: '+75',
          carbonCoins: '-375',
          description: '从卖家C处购买了75单位碳额度'
        },
        {
          date: '2022-01-15',
          type: '出售碳额度',
          quota: '-40',
          carbonCoins: '+200',
          description: '向买家D出售了40单位碳额度'
        },
        {
          date: '2022-02-01',
          type: '购买碳额度',
          quota: '+80',
          carbonCoins: '-400',
          description: '从卖家E处购买了80单位碳额度'
        },
        {
          date: '2022-02-10',
          type: '出售碳额度',
          quota: '-60',
          carbonCoins: '+300',
          description: '向买家F出售了60单位碳额度'
        },
        {
          date: '2022-02-20',
          type: '购买碳额度',
          quota: '+90',
          carbonCoins: '-450',
          description: '从卖家G处购买了90单位碳额度'
        },
        {
          date: '2022-03-01',
          type: '出售碳额度',
          quota: '-70',
          carbonCoins: '+350',
          description: '向买家H出售了70单位碳额度'
        },
        {
          date: '2022-03-15',
          type: '购买碳额度',
          quota: '+100',
          carbonCoins: '-500',
          description: '从卖家I处购买了100单位碳额度'
        },
        {
          date: '2022-03-30',
          type: '出售碳额度',
          quota: '-80',
          carbonCoins: '+400',
          description: '向买家J出售了80单位碳额度'
        },
      ],
      };
    },
    created() {
      this.fetchAssets();
      this.fetchTransactionHistory();
    },
    methods: {
      fetchAssets() {
        // 从服务器获取个人碳排放额度和碳币余额的逻辑
      },
      fetchTransactionHistory() {
        // 从服务器获取交易历史记录的逻辑
      },
    },
  };
  </script>